<template>
  <div class="bgOrderSelectVehiclesMainMultiType tablePageWarp" style="padding: 0">
    <!-- 搜索区域 -->
    <div
      class="table-page-search-wrapper commonSelectWidth bgOrderSelectVehiclesMainMultiTypeSearch listSearchWrap"
      style="margin-bottom: 16px"
    >
      <a-form>
        <a-row :gutter="[8, 16]">
          <a-col
            :xs="24"
            :sm="24"
            :md="24"
            :lg="8"
            :xl="6"
            :xxl="7">
            <!-- 车型，必填写 -->
            <a-form-item :colon="false">
              <car-model-select
                ref="carModelSelectRef"
                mode="default"
                :query="{ time: drawerOpenTime }"
                :has-all="false"
                :default-value="formData.modelId1"
                @changeoption="changeModelBefore"
              ></car-model-select>
            </a-form-item>
          </a-col>
          <a-col
            :xs="24"
            :sm="24"
            :md="24"
            :lg="4"
            :xl="4"
            :xxl="3">
            <!-- 省份 -->
            <a-form-item :colon="false">
              <province-select :default-value="formData.province" @changeoption="changeOption($event, 'province')">
              </province-select>
            </a-form-item>
          </a-col>
          <!-- 车辆类型 -->
          <a-col
            :xs="24"
            :sm="24"
            :md="12"
            :lg="6"
            :xl="4"
            :xxl="4">
            <a-form-item :colon="false">
              <vehicle-type-select
                :default-value="formData.vehicleType"
                @changeoption="changeOption($event, 'vehicleType')"
              ></vehicle-type-select>
            </a-form-item>
          </a-col>
          <!-- VIN -->
          <a-col
            :xs="24"
            :sm="24"
            :md="12"
            :lg="6"
            :xl="5"
            :xxl="6">
            <a-form-item :colon="false">
              <a-input
                v-model.trim="formData.vin"
                @keyup.enter="refreshData(true)"
                :placeholder="$t('pleaseInput') + 'VIN'"
                allowClear
              />
            </a-form-item>
          </a-col>
          <a-col
            :xs="24"
            :sm="24"
            :md="24"
            :lg="24"
            :xl="5"
            :xxl="4">
            <div class="searchBtns">
              <a-button type="info" @click="refreshData(true)">
                <!-- <i class="iconfont icon-chazhao"></i> -->
                {{ $t('inquiry') }}
              </a-button>
              <a-button @click="clearCondition">
                <!-- <i class="iconfont icon-qingkong"></i> -->
                {{ $t('clear') }}
              </a-button>
            </div>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 自定义选择 -->
    <div class="bgOrderSelectVehiclesMainMultiTypeTableTj">
      <div>
        <span style="margin-right: 8px">{{ $t('selectedVehicles') }}</span>
        <span>{{ selectedVehicleTotal }}</span>
      </div>
      <div>
        <a-checkbox @change="changeSelfSelect" :checked="formData.isCustomSelect">{{ $t('customSelect') }}</a-checkbox>
      </div>
    </div>
    <!-- 列表区域 -->
    <div class="bgOrderSelectVehiclesMainMultiTypeTable">
      <s-table
        :columns="columns"
        :data="loadData"
        :scrollX="900"
        :row-selection="formData.isCustomSelect ? rowSelection : null"
        row-key="id"
        class="h100"
        ref="table"
      >
        <template slot-scope="text" v-for="column in commonColumns" :slot="column.scopedSlots">
          <table-ellipsis :text="text || '-'" :key="column.dataIndex"></table-ellipsis>
        </template>
        <template #vehicleType="text">
          <table-ellipsis :text="$t(text === 1 ? 'formal' : 'test')"></table-ellipsis>
        </template>
        <template #province="text">
          <table-ellipsis :text="$t(text) || '-'"></table-ellipsis>
        </template>
        <template #latestOnlineTime="text">
          <table-ellipsis :text="$commonFun.getDateTimeStr(text) || '-'"></table-ellipsis>
        </template>
      </s-table>
    </div>
  </div>
</template>
<script>
import VehicleTypeSelect from '@/views/components/VehicleTypeSelect'
import ProvinceSelect from '@/views/components/ProvinceSelect'
import { STable } from '@/components'
import { bgOrderVehicleTbColumns } from '../config/list'
import tableEllipsis from '@/components/Ellipsis/TableEllipsis'
import vehicleApi from '@/api/modules/system/vehicleMana'
import CarModelSelect from '@/views/components/CarModelSelect'
import { mapGetters } from 'vuex'
export default {
  components: {
    VehicleTypeSelect,
    ProvinceSelect,
    tableEllipsis,
    STable,
    CarModelSelect
  },
  computed: {
    ...mapGetters(['drawerOpenTime']),
    commonColumns () {
      return this.columns.filter((item) => !item.special)
    },
    rowSelection () {
      return {
        selectedRowKeys: this.formData.vehicleIds,
        onChange: this.onSelectChange
      }
    },
    formData () {
      return this.$store.state.orderManagement.bgOrderFormData
    },
    selectedVehicleTotal () {
      if (this.formData.isCustomSelect) {
        return this.formData.vehicleIds.length
      }
      return this.vehicleCount
    }
  },
  data () {
    return {
      columns: bgOrderVehicleTbColumns,
      isCustomSelect: false,
      selectedRowKeys: [],
      vehicleCount: 0
    }
  },
  watch: {
    drawerOpenTime: {
      handler () {
        this.$nextTick(() => {
          this.refreshData()
        })
      },
      immediate: true
    }
  },
  methods: {
    // 选择车型
    changeModelBefore (val) {
      this.formData.modelId1 = val
      this.formData.vehicleIds = []
      this.refreshData()
    },
    refreshData (isToFirstPage = true) {
      if (!this.$refs.table) {
        return
      }
      let obj = null
      if (isToFirstPage) {
        obj = { current: 1 }
      }
      this.$refs.table.loadData(obj)
    },
    clearCondition () {
      this.formData.province = undefined
      this.formData.vehicleType = undefined
      this.formData.modelId1 = undefined
      this.formData.vin = ''
      this.formData.vehicleIds = []
      this.refreshData()
    },
    changeOption (val, key) {
      this.formData[key] = val
    },
    loadData (parameter) {
      if (!this.formData.modelId1) {
        this.vehicleCount = 0
        return new Promise((resolve) => {
          resolve({
            code: 0,
            message: '',
            data: [],
            totalCount: 0,
            totalPage: 0
          })
        })
      }
      const params = { modelIds: [this.formData.modelId1], ...parameter }
      if (this.formData.province) {
        params.province = this.formData.province
      }
      if (this.formData.vehicleType) {
        params.vehicleType = this.formData.vehicleType
      }
      if (this.formData.vin) {
        params.vin = this.formData.vin
      }
      const fetchData = vehicleApi.getVehiclePageData(params)
      fetchData.then((res) => {
        this.vehicleCount = res.totalCount
      })
      return fetchData
    },
    // 自定义选择
    changeSelfSelect (evt) {
      this.formData.isCustomSelect = evt.target.checked
      if (!this.formData.isCustomSelect) {
        this.formData.vehicleIds = []
      }
    },
    onSelectChange (selectedRowKeys) {
      this.formData.vehicleIds = selectedRowKeys
    },
    // 获取选择车辆数量、车型Id、车型代码、车型名称、版型
    getFormData () {
      const result = {
        total: 0,
        modelId: this.formData.modelId1,
        modelCode: '',
        trimLevel: '',
        modelName: ''
      }
      result.total = this.selectedVehicleTotal
      const obj = this.$refs.carModelSelectRef.modelOptions.find((item) => item.id === this.formData.modelId1)
      if (obj) {
        result.modelCode = obj.code
        result.trimLevel = obj.trimLevel
        result.modelName = obj.title
      }
      return result
    }
  }
}
</script>
<style lang="less" scoped>
.bgOrderSelectVehiclesMainMultiTypeTableTj {
  flex: none;
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.bgOrderSelectVehiclesMainMultiTypeTable {
  flex: 1 0 0;
  min-height: 260px;
}
</style>
